{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ansible Playbook Runner</title>
    <!-- 引入 jQuery -->
    <link href="{% static 'layui.css' %}" rel="stylesheet">
    <script src="{% static 'layui.js' %}"></script>
    <script src="{% static 'jquery-3.6.0.min.js' %}"></script
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-sm12">

            <div class="task-info">
                <h3>任务ID: <span id="task-id">-</span></h3>
            </div>

            <div id="error-message" class="error" style="display: none;"></div>

            <div class="output-area" id="output-area">
                <h3>标准输出 (STDOUT):</h3>
                <pre id="stdout"></pre>
                <h3>标准错误 (STDERR):</h3>
                <pre id="stderr"></pre>
                <h3>返回码 (RC): <span id="rc"></span></h3>
            </div>


        </div>
    </div>

</div>


<script>

    layui.use(function () {
        // code
        layui.code({
            langMarker: true,
            header: true,
            lang: 'bash',
            elem: '.code-demo',
        });
    });

    $(document).ready(function () {
            let csrftoken = null;
            $.get('/get_csrf_token/', function (data) {
                csrftoken = data.csrfToken;
            });
// 自动获取任务ID

            const taskId = "{{ task_id }}";
            console.log(taskId)
            $('#task-id').text(taskId || '未获取到任务ID');

// 检查任务状态
            function checkStatus() {
                $('#loading').show();
                {#$('#check-status').prop('disabled', true);#}
                $('#error-message').hide();

                $.ajax({
                    url: `/get_result/${taskId}`,
                    method: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        {#console.log(data)#}
                        if (data.status === 'pending') {
                            $('#error-message').html('任务仍在执行中...').show();
                            return;
                        }

// 更新输出内容
                        rc = data.rc + "";
                        console.log()
                        $('#stdout').text(data.stdout || '(无输出)');
                        $('#stderr').text(data.stderr || '(无错误)');
                        $('#rc').text(rc || '未返回');


                    }
                    ,
                    error: function (jqXHR, textStatus, errorThrown) {
                        $('#error-message').html(`请求失败: ${textStatus}`).show();
                    }
                    ,
                    complete: function () {
                        $('#loading').hide();
                        {#$('#check-status').prop('disabled', false);#}
                    }
                });
            }

// 初始检查
            checkStatus();
// 每5秒自动刷新
            setInterval(checkStatus, 5000);
        }
    )
    ;
</script>
</body>
</html>